<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WorkWise Html Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/animate.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/line-awesome.css">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/style/css/line-awesome-font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/slick.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/slick-theme.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/style.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/css/responsive.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/common/layui/css/layui.css" media="all">

</head>

<body>
<div class="wrapper">
    <header>
        <div class="container">
            <div class="header-data">
                <div class="logo">
                    <a href="" title=""><img src="${pageContext.request.contextPath}/style/picture/logo.png" alt=""></a>
                </div><!--logo end-->
                <nav style="margin-left: 270px">
                    <ul>
                        <li>
                            <a href="index.jsp" title="">
                                <span><img src="${pageContext.request.contextPath}/style/picture/icon1.png"
                                           alt=""></span>
                                主页
                            </a>
                        </li>
                        <li>
                            <a href="profiles.jsp" title="">
                                <span><img src="${pageContext.request.contextPath}/style/picture/icon4.png"
                                           alt=""></span>
                                好友
                            </a>
                            <ul>
                                <li><a href="addprofiles.jsp" title="">添加好友</a></li>
                                <li><a href="profiles.jsp" title="">我的好友</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav><!--nav end-->
                <div class="menu-btn">
                    <a href="#" title=""><i class="fa fa-bars"></i></a>
                </div><!--menu-btn end-->
                <div class="user-account">
                    <div class="user-info">
                        <c:if test="${sessionScope.user.userImg != null }">
                            <img src="${pageContext.request.contextPath}/user/getUserImg?fileName=${sessionScope.user.userImg}"
                                 alt="about image" class="img-fluid" style="width:30px;heigh:30px" name="userImg"
                                 id="smallUserImg">
                        </c:if>
                        <c:if test="${sessionScope.user.userImg == null }">
                            <img src="${pageContext.request.contextPath}/style/picture/user-pic.png" alt="about image"
                                 class="img-fluid" style="width:30px;heigh:30px" name="userImg" id="smallUserImg">
                        </c:if>
                        <a href="#" title="">${sessionScope.user.userName}</a>
                        <i class="la la-sort-down"></i>
                    </div>
                    <div class="user-account-settingss">

                        <h3 class="tc"><a href="${pageContext.request.contextPath}/user/exit" title="">退出</a></h3>
                    </div><!--user-account-settingss end-->
                </div>
            </div><!--header-data end-->
        </div>
    </header><!--header end-->


    <section class="companies-info">
        <div class="container">


            <div class="search-sec">
                <div class="container">
                    <div class="search-box">
                        <form id="searchform">
                            <input type="text" name="search" id="kw" placeholder="Search keywords">
                            <button type="button" id="search">Search</button>
                        </form>
                    </div><!--search-box end-->
                </div>
            </div>
            <div style="height: 60px"></div>
            <div class="companies-list" style="margin-top: 100px">
                <div class="row" id="LAY_demo1" >


                </div>
            </div><!--companies-list end-->
            <%--<div class="process-comm">
                <a href="#" title=""><img src="${pageContext.request.contextPath}/style/picture/process-icon.png"
                                          alt=""></a>
            </div>--%>
        </div>
    </section><!--companies-info end-->
</div><!--theme-layout end-->
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/popper.js"></script>
<script type="text/javascript" src="style/common/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/flatpickr.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/slick.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/style/js/script.js"></script>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $.ajaxSetup({
            complete: function (xhr, status) {
                //拦截器实现超时跳转到登录页面
                // 通过xhr取得响应头
                var REDIRECT = xhr.getResponseHeader("REDIRECT");
                //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                if (REDIRECT == "REDIRECT") {
                    var win = window;
                    while (win != win.top) {
                        win = win.top;
                    }
                    //重新跳转到 login.html
                    win.location.href = xhr.getResponseHeader("CONTENTPATH");
                }
            }
        });

        $("#LAY_demo1").empty()
        layui.use('flow', function () {
            layui.showFriend();
        });

        $("#searchform").submit(function(){
            $("#LAY_demo1").empty()
            layui.use('flow', function () {
                var flow = layui.flow;
                flow.load({
                    elem: '#LAY_demo1' //流加载容器
                    , isAuto: true
                    , end: "滑到底了噢~~"
                    , done: function (page, next) { //执行下一页的回调
                        var lis = [];
                        $.post("${pageContext.request.contextPath}/FriendController/queryMyfirendByKey", {
                            pn: page,
                            ps: 4,
                            kw:$("#kw").val()
                        }, function (pageInfo) {
                            layui.each(pageInfo.list, function (i, obj) {
                                lis.push("<div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\n" +
                                    "\t\t\t\t\t\t\t<div class=\"company_profile_info\" style=\"width:220px;display:inline-block\">\n" +
                                    "\t\t\t\t\t\t\t\t<div class=\"company-up-info\">\n" +
                                    "\t\t\t\t\t\t\t\t\t<img src=\"${pageContext.request.contextPath}/user/getUserImg?fileName=" + obj.friend.userImg + "\" alt=\"\">\n" +
                                    "\t\t\t\t\t\t\t\t\t<h3>" + obj.friend.userName + "</h3>\n" +
                                    "\t\t\t\t\t\t\t\t\t<h4>" + obj.friend.userSign + "</h4>\n" +
                                    "\t\t\t\t\t\t\t\t\t<ul>\n" +
                                    "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"follow\">Follow</a></li>\n" +
                                    "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"message-us\"><i class=\"fa fa-envelope\"></i></a></li>\n" +
                                    "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"hire-us\">Hire</a></li>\n" +
                                    "\t\t\t\t\t\t\t\t\t</ul>\n" +
                                    "\t\t\t\t\t\t\t\t</div>\n" +
                                    "\t\t\t\t\t\t\t\t<a href=\"${pageContext.request.contextPath}/liaotian.jsp?userName="+obj.friend.userName+"\" title=\"\" class=\"view-more-pro\">聊他</a>\n" +
                                    "\t\t\t\t\t\t\t</div><!--company_profile_info end-->\n" +
                                    "\t\t\t\t\t\t</div>")
                            })
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < pageInfo.pages);
                        })
                    }
                });
            });
            return false;
        })
        $("#search").click(function () {
            $("#LAY_demo1").empty()
            layui.use('flow', function () {
                var flow = layui.flow;
                flow.load({
                    elem: '#LAY_demo1' //流加载容器
                    , isAuto: true
                    , end: "滑到底了噢~~"
                    , done: function (page, next) { //执行下一页的回调
                        var lis = [];
                        $.post("${pageContext.request.contextPath}/FriendController/queryMyfirendByKey", {
                            pn: page,
                            ps: 4,
                            kw:$("#kw").val()
                        }, function (pageInfo) {
                            layui.each(pageInfo.list, function (i, obj) {
                                lis.push("<div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\n" +
                                    "\t\t\t\t\t\t\t<div class=\"company_profile_info\" style=\"width:220px;display:inline-block\">\n" +
                                    "\t\t\t\t\t\t\t\t<div class=\"company-up-info\">\n" +
                                    "\t\t\t\t\t\t\t\t\t<img src=\"${pageContext.request.contextPath}/user/getUserImg?fileName=" + obj.friend.userImg + "\" alt=\"\">\n" +
                                    "\t\t\t\t\t\t\t\t\t<h3>" + obj.friend.userName + "</h3>\n" +
                                    "\t\t\t\t\t\t\t\t\t<h4>" + obj.friend.userSign + "</h4>\n" +
                                    "\t\t\t\t\t\t\t\t\t<ul>\n" +
                                    "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"follow\">Follow</a></li>\n" +
                                    "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"message-us\"><i class=\"fa fa-envelope\"></i></a></li>\n" +
                                    "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"hire-us\">Hire</a></li>\n" +
                                    "\t\t\t\t\t\t\t\t\t</ul>\n" +
                                    "\t\t\t\t\t\t\t\t</div>\n" +
                                    "\t\t\t\t\t\t\t\t<a href=\"${pageContext.request.contextPath}/liaotian.jsp?userName="+obj.friend.userName+"\" title=\"\" class=\"view-more-pro\">聊他</a>\n" +
                                    "\t\t\t\t\t\t\t</div><!--company_profile_info end-->\n" +
                                    "\t\t\t\t\t\t</div>")
                            })
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < pageInfo.pages);
                        })
                    }
                });
            });
        })

    })

    //封装流加载方法
    layui.define('flow', function (exports) {
        var flow = layui.flow;
        exports('showFriend', function () {
            flow.load({
                elem: '#LAY_demo1' //流加载容器
                , isAuto: true
                , end: "滑到底了噢~~"
                , done: function (page, next) { //执行下一页的回调
                    var lis = [];
                    $.post("${pageContext.request.contextPath}/FriendController/queryfirend", {
                        pn: page,
                        ps: 4
                    }, function (pageInfo) {
                        layui.each(pageInfo.list, function (i, obj) {
                            lis.push("<div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\n" +
                                "\t\t\t\t\t\t\t<div class=\"company_profile_info\" style=\"width:220px;display:inline-block\">\n" +
                                "\t\t\t\t\t\t\t\t<div class=\"company-up-info\">\n" +
                                "\t\t\t\t\t\t\t\t\t<img src=\"${pageContext.request.contextPath}/user/getUserImg?fileName=" + obj.friend.userImg + "\" alt=\"\">\n" +
                                "\t\t\t\t\t\t\t\t\t<h3>" + obj.friend.userName + "</h3>\n" +
                                "\t\t\t\t\t\t\t\t\t<h4>" + obj.friend.userSign + "</h4>\n" +
                                "\t\t\t\t\t\t\t\t\t<ul>\n" +
                                "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"follow\">Follow</a></li>\n" +
                                "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"message-us\"><i class=\"fa fa-envelope\"></i></a></li>\n" +
                                "\t\t\t\t\t\t\t\t\t\t<li><a href=\"#\" title=\"\" class=\"hire-us\">Hire</a></li>\n" +
                                "\t\t\t\t\t\t\t\t\t</ul>\n" +
                                "\t\t\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t\t\t<a href=\"${pageContext.request.contextPath}/liaotian.jsp?userName="+obj.friend.userName+"\" title=\"\" class=\"view-more-pro\">聊他</a>\n" +
                                "\t\t\t\t\t\t\t</div><!--company_profile_info end-->\n" +
                                "\t\t\t\t\t\t</div>")
                        })
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < pageInfo.pages);
                    })
                }
            });
        })

    });
</script>
</html>
